<template>
  <v-app>
    <v-navigation-drawer :permanent="true" :rail="smAndDown">
      <v-list>
        <v-list-item v-for="(item, index) in menuItems" :key="index" :to="`/${item.value}`">
          <template #prepend>
            <v-icon :icon="item.icon" :title="item.title" />
          </template>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main class="overflow-y-auto">
      <div class="pa-4" style="max-width: 900px"><router-view /></div>
    </v-main>
  </v-app>
</template>

<script lang="ts" setup>
import { mdiKeyboard, mdiShieldKey, mdiTune } from '@mdi/js'
import { useSystemStateListener } from '@/composables/useSystemStateListener'
import { useDisplay } from 'vuetify'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'

// 启动系统状态监听器
useSystemStateListener()
const { smAndDown } = useDisplay()
const { t } = useI18n()
const router = useRouter()

// 处理初始路由
onMounted(() => {
  // 检查 URL 中是否有哈希路由
  const hash = window.location.hash
  if (hash && hash.includes('#/')) {
    const routePath = hash.split('#')[1]
    if (routePath && routePath !== router.currentRoute.value.path) {
      router.push(routePath)
    }
  }
})

interface MenuItem {
  icon: string
  title: string
  value: string
}

const menuItems = computed<MenuItem[]>(() => [
  { title: t('settings.menu.appearanceLanguage'), value: 'general', icon: mdiTune },
  { title: t('settings.menu.shortcuts'), value: 'shortcuts', icon: mdiKeyboard },
  { title: t('settings.menu.passwordManager'), value: 'password-manager', icon: mdiShieldKey }
])
</script>

<style lang="scss" scoped>
.v-main {
  height: 100vh;
}

.v-container {
  padding: 16px;
}

.v-card {
  margin-bottom: 16px;
}
</style>

<i18n>
{
  "zhHans": {
    "settings": {
      "menu": {
        "appearanceLanguage": "外观与语言",
        "shortcuts": "快捷键",
        "passwordManager": "密码管理器"
      }
    }
  },
  "en": {
    "settings": {
      "menu": {
        "appearanceLanguage": "Appearance & Language",
        "shortcuts": "Shortcuts",
        "passwordManager": "Password Manager"
      }
    }
  }
}
</i18n>
